<template>
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm.data" :rules="rules" label-width="auto"
        class="demo-ruleForm" :size="formSize" status-icon>
        <el-form-item label="Activity name" prop="name">
            <el-input v-model="ruleForm.data.name" />
        </el-form-item>
        <el-form-item label="Activity zone" prop="region">
            <el-select v-model="ruleForm.data.region" placeholder="Activity zone">
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
            </el-select>
        </el-form-item>
        <el-form-item label="Resources" prop="resource">
            <el-radio-group v-model="ruleForm.data.resource">
                <el-radio value="Sponsorship">Sponsorship</el-radio>
                <el-radio value="Venue">Venue</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="Activity form" prop="desc">
            <el-input v-model="ruleForm.data.desc" type="textarea" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                保存
            </el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';

const ruleFormRef = ref()
let ruleForm = reactive({
    data: {
        name: 'Hello',
        region: 'Zone two',
        resource: 'Venue',
        desc: 'This is a test!',
    }
})

const locationOptions = ['Home', 'Company', 'School']

const rules = reactive({
    name: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    region: [
        {
            required: true,
            message: 'Please select Activity zone',
            trigger: 'change',
        },
    ],
    resource: [
        {
            required: true,
            message: 'Please select activity resource',
            trigger: 'change',
        },
    ],
    desc: [
        { required: true, message: 'Please input activity form', trigger: 'blur' },
    ],
})

const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!');
            console.log(ruleForm)
            const nodeData = props.nodeData.data;
            nodeData.properties = ruleForm;
            props.lf.setProperties(nodeData.id, ruleForm.data);
            console.log(props.lf.getGraphData());
            // this.$emit('onClose');
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}

onMounted(() => {
    console.log("props.nodeData.data");
    console.log(props.nodeData.data);
    console.log("props.nodeData.lf");
    console.log(props.lf);
    const { properties } = props.nodeData.data;
    console.log('Object.assign({}, ruleForm, properties)');
    console.log(Object.assign({}, ruleForm, properties));
    if (properties) {
        ruleForm.data = Object.assign({}, ruleForm.data, properties);
    }
});

const props = defineProps(["nodeData", "lf"]);
</script>

<style></style>